<template>
	<view class="container container24934">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column">
			<image src="/static/global/cat.jpg" class="response diygw-col-24" mode="widthFix"></image>
		</view>
		<view  class="flex diygw-col-24 flex-nowrap flex1-clz">
			<view v-if="type=='common'" class="flex flex-wrap diygw-col-12 flex-direction-column flex2-clz">
				<view @click="support()" class="flex diygw-col-24 justify-center items-center flex-nowrap flex4-clz">
					<view class="flex diygw-col-7">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/talk/support.png">
							</image>
						</view>
					</view>
					<view class="diygw-col-10 text-clz"> 支持 </view>
				</view>
			</view>
			<view v-if="type=='support'" class="flex flex-wrap diygw-col-12 flex-direction-column flex2-clz">
				<view  class="flex diygw-col-24 justify-center items-center flex-nowrap flex4-clz">
					<view class="flex diygw-col-7">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/talk/support.png">
							</image>
						</view>
					</view>
					<view class="diygw-col-11 text-clz"> 已支持 </view>
				</view>
			</view>
			<view v-if="type=='common'" class="flex flex-wrap diygw-col-12 flex-direction-column flex3-clz">
				<view @click="against()"
					class="flex diygw-col-24 justify-center items-center flex-nowrap bg-none flex5-clz">
					<view class="flex diygw-col-7">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/talk/unsupport.png">
							</image>
						</view>
					</view>
					<view class="diygw-col-10 text1-clz"> 反对 </view>
				</view>
			</view>
			<view v-if="type=='against'" class="flex flex-wrap diygw-col-12 flex-direction-column flex3-clz">
				<view
					class="flex diygw-col-24 justify-center items-center flex-nowrap bg-none flex5-clz">
					<view class="flex diygw-col-7">
						<view class="diygw-avatar sm radius bg-none">
							<image mode="aspectFit" class="diygw-avatar-img radius" src="/static/talk/unsupport.png">
							</image>
						</view>
					</view>
					<view class="diygw-col-10 text1-clz"> 已反对 </view>
				</view>
			</view>
		</view>
		<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex52-clz">
			<view class="diygw-col-12 text2-clz"> 已有 {{ total }} 人参与了投票 </view>
			<view v-if="type=='common'" class="diygw-col-8 text3-clz"> 投票后查看结果 </view>
			<view v-if="type!='common'" class="diygw-col-8 text3-clz"> {{ supportNum }}人支持</view>
			<view v-if="type!='common'" class="diygw-col-8 text3-clz"> {{ againstNum }}人反对 </view>
		</view>

		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				id: '',
				datarows: {},
				total: 0,
				supportNum: 0,
				againstNum: 0,
				type:'common',
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
				this.id = option.id
			}

			this.init();
		},
		methods: {
			async init() {
				this.resultApi()
				
			},
			async resultApi() {

				const http_url = '/phonation/'+this.id
				const result =await this.$http.get(http_url)
				const http_data = result.data
				console.log(result)
				this.datarows = http_data
				this.supportNum = http_data.support
				this.againstNum = http_data.against
				this.total = this.supportNum + this.againstNum
				this.isCheck()
			},
			async support() {
				const data={
					"id":this.id,
					"support":this.supportNum+1
				}
				const header={
					'content-type': 'application/json;charset=UTF-8',
				}
				const http_url='/phonation'
				const result =await this.$http.put(http_url,data,header)
				const code = result.code
				if(code==200){
					uni.showToast({
						title: '您已支持',
						icon: 'success',
						duration: 2000
					});
					await this.add('support')
				}
			},
			async against(){
				const data={
					"id":this.id,
					"against":this.againstNum+1
				}
				const header={
					'content-type': 'application/json;charset=UTF-8',
				}
				const http_url='/phonation'
				const result =await this.$http.put(http_url,data,header)
				const code = result.code
				if(code==200){
					uni.showToast({
						title: '您已反对',
						icon: 'success',
						duration: 2000
					});
					await this.add('against')
				}
			},
			async add(type){
				const data={
					"phonationId":parseInt(this.id),
					"type":type
				}
				const header={
					'content-type': 'application/json;charset=UTF-8',
					"Token":uni.getStorageSync('token')
				}
				const http_url='/phonationUser/save'
				const result =await this.$http.post(http_url,data,header)
				
			},
			async isCheck(){
				const data={
					"phonation_id":this.id,
				}
				const header={
					"Token":uni.getStorageSync('token')
				}
				const http_url='/phonationUser/get'
				const result =await this.$http.get(http_url,data,header)
				const http_data = result.data
				if(http_data!=0){
					this.type = http_data.type
					console.log(this.type)
				}else if(http_data==0){
					this.type='common'
				}
			}
			
		},
		onPullDownRefresh() {
			this.init()
		},
	};
</script>

<style lang="scss" scoped>
	.flex1-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.text2-clz {
		margin-left: 10rpx;
		width: calc(50% - 10rpx - 10rpx) !important;
		font-size: 30rpx !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.text3-clz {
		margin-left: 10rpx;
		width: calc(33.3333333333% - 10rpx - 10rpx) !important;
		font-size: 30rpx !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}

	.flex2-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(50% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.flex4-clz {
		padding-top: 10rpx;
		border-bottom-left-radius: 40rpx;
		padding-left: 10rpx;
		padding-bottom: 10rpx;
		border-top-right-radius: 40rpx;
		margin-right: 15rpx;
		background-color: #ffa500;
		margin-left: 30rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(100% - 30rpx - 15rpx) !important;
		border-top-left-radius: 40rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 40rpx;
		margin-bottom: 10rpx;
		height: 160rpx !important;
		padding-right: 10rpx;
	}

	.flex52-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(100% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.text-clz {
		color: #f5f5f5;
		font-weight: bold;
		font-size: 36rpx !important;
		font-family: 黑体;
	}

	.flex3-clz {
		margin-left: 10rpx;
		padding-top: 10rpx;
		padding-left: 10rpx;
		width: calc(50% - 10rpx - 10rpx) !important;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		padding-right: 10rpx;
	}

	.flex5-clz {
		border-bottom-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		margin-right: 30rpx;
		background-color: #fffdfd;
		margin-left: 15rpx;
		flex-shrink: 0;
		overflow: hidden;
		width: calc(100% - 15rpx - 30rpx) !important;
		border-top-left-radius: 40rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 40rpx;
		margin-bottom: 10rpx;
		height: 160rpx !important;
	}

	.text1-clz {
		color: #ffa500;
		font-weight: bold;
		font-size: 36rpx !important;
		font-family: 黑体;
	}

	.container24934 {
		padding-left: 0px;
		padding-right: 0px;

		background-image: url(/static/talk_bg_details.png);
	}

	.container24934 {}
</style>